import React, {useEffect, useState} from 'react';
import {Menu} from "antd";
import {Outlet, useLocation, useNavigate} from "react-router-dom";
import Impression from "./Impression";
import Cookies from 'js-cookie'


const Index = (pro) => {
    const state =useLocation();
   const [items,setItems]= useState([
        {
            label: <Impression/>
            ,
            key: 'impression',
        },
        {
            label:  <div onClick={()=>{navigate("announcement")} } style={{width:"100%",height:"100%"}}>公告</div>
            ,
            key: 'announcement',
        },
        {
            label: (
                <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
                    Navigation Four - Link
                </a>
            ),
            key: 'alipay',
        },
        {
            label:  <div onClick={()=>{navigate("users")} } style={{width:"100%",height:"100%"}}>用户管理</div>
            ,
            key: 'users',
        },
       {
           label:  <div onClick={()=>{navigate("plan")} } style={{width:"100%",height:"100%"}}>行程计划</div>
           ,
           key: 'plan',
       },
    ])
    useEffect(()=>{
        console.log(pro)
       var list = pro.items.map(t=>{
           return t.Name
           }
       );
        console.log(list)
       setItems(items.filter(t=>{
            return list.indexOf(t.key)!=-1||t.key==="impression"
        }))

    },[])
    const navigate = useNavigate();


    const [current, setCurrent] = useState('mail');
    const onClick = (e) => {

        console.log(pro)
        console.log('click ', e);
        setCurrent(e.key);
    };
    return <div>
        <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} theme="dark"/>
        <Outlet/>
    </div>;
};

export default Index;
